<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取验证码</title>
    <link rel="stylesheet" href="./static/css/semantic.min.css">
    <link rel="stylesheet" href="./static/css/manster.css">
</head>
	<body class="login">
		
	<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
		<div class="ur container">
			<div class="ui middle aligned center aligned grid">
				<div class="column">
					<h2 class="ui teal image header">
						<div class="content">
							获取otp信息
						</div>
					</h2>
					<div class="ui large form">
						<div class="ui  segment">
							<div class="field">
								<div class="ui left icon input">
									<i class="user icon"></i>
									<input type="text" id="telphone" name="telphone" placeholder="手机号">
								</div>
							</div>
							<div class="field">
								<div class="ui left icon input">
									<button class="ui large blue submit button" id="getotp" type="submit">获取otp短信</button>
								</div>
							</div>
						</div>
	
						<div class="ui error mini message"></div>
	
					</div>
	
				</div>
			</div>
		</div>
	</div>
		
	<script src="./static/js/jquery-3.3.1.js"></script>
	<script src="./static/js/semantic.min.js"></script>

	
	<script>
		jQuery(document).ready(function(){
			//绑定otp的click事件用于向后端获取验证码
			$("#getotp").on("click", function(){
				var telphone = $("#telphone").val();
				if(telphone == null || telphone == ""){
					alert("手机号不能为空");
					return false;
				}
				$.ajax({
					type:"POST",
					contentType:"application/x-www-form-urlencoded",
					url:"http://localhost:8888/user/getotp",
					data:{
						"telphone": $("#telphone").val(),
					},
					xhrFields:{withCredentials:true},
					success:function(data){
						if("success" == data.status){
							alert("otp已经发送到了您的手机，请注意查收");
							window.location.href="register.html";
						}else{
							alert("otp发送失败，原因为"+data.data.errMsg);
						}
					},
					error:function(data){
						alert("otp发送失败，原因为"+data.responseText);
					}
					
				});
				return false;
			});
			
		});
	</script>
	
	</body>
</html>
